<template>
  <div class="page">
    <div class="long_bg">
      <div class="f_c_s_c content">
        <vip-price-com />

        <div class="vip_card"></div>

        <div class="f_r_c_c btns fl2">
          <div
            class="f_r_c_c"
            style="width:40%;"
            @click="ableToBuy?pageJump('xzBuy'):showToast({msg:'亲爱的会员，每人限购一张会员卡哦！'})"
          >
            <img src="/game/static/images/logo.png" class="lucy_logo" />
            <div class="f_c_c_s">
              <span class="normal-text c3">LUCY购买</span>
              <div class="f_r_s_c">
                <span class="mini-text text-red">享{{discount}}折优惠&nbsp;</span>
                <span class="icon arrow_right red arrow_right_op5"></span>
              </div>
            </div>
          </div>
          <div class="v_line"></div>
          <div class="f_r_c_c" style="width:30%;" @click="pageJump('xzOrder')">
            <span class="normal-text c3">我的订单&nbsp;</span>
            <span class="icon arrow_right arrow_right_op5"></span>
          </div>
          <div class="v_line"></div>
          <div class="f_r_c_c" style="width:30%;" @click="isNode()">
            <span class="normal-text c3">我的推广&nbsp;</span>
            <span class="icon arrow_right arrow_right_op5"></span>
          </div>
        </div>

        <des-title-com text="六大专项特权" />
        <div class="rights_area f_r_s_c flex_wrap">
          <div class="f_r_s_c right_item" v-for="(item,index) in rights" :key="index">
            <span :class="['icon',item.icon]"></span>
            <div class="des f_c_c_s">
              <p class="title">{{item.title}}</p>
              <p class="sub_title">{{item.subTitle}}</p>
            </div>
          </div>
        </div>
        <des-title-com text="「想住」有你更精彩" />
        <div class="ph30">
          <img src="/game/static/images/xiangzhu/target.png" style="max-width:100%;" />
        </div>
        <des-title-com text="带你了解「想住」" />
        <div class="collapse_area">
          <collapse-parent-com :firstOpen="false">
            <collapse-com
              v-for="(item,index) in abouts"
              :key="index"
              :title="item.title"
              :content="item.content"
            ></collapse-com>
          </collapse-parent-com>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vipPriceCom from "./vipPriceCom.vue";
import desTitleCom from "./desTitleCom.vue";
import collapseParentCom from "../../components/collapse/CollapseParent.vue";
import CollapseCom from "../../components/collapse/Collapse.vue";

export default {
  components: {
    vipPriceCom,
    desTitleCom,
    collapseParentCom,
    CollapseCom
  },
  props: {},
  data() {
    return {
      navData: {
        title: "想住",
        path: "mine",
        leftIcon: true
      },
      rights: [
        {
          icon: "right_1",
          title: "高端民宿",
          subTitle: "均价在600以上"
        },
        {
          icon: "right_2",
          title: "不限地区",
          subTitle: "国内国外，全球通住"
        },
        {
          icon: "right_3",
          title: "不限民宿",
          subTitle: "所有合作民宿均可预订"
        },
        {
          icon: "right_4",
          title: "不限房型",
          subTitle: "高端房型，任您选择"
        },
        {
          icon: "right_5",
          title: "不限时间",
          subTitle: "节假日、周末均可使用"
        },
        {
          icon: "right_6",
          title: "不限次数",
          subTitle: "一年内不限制订房次数"
        }
      ],
      abouts: [
        {
          title: "一、「想住」有哪些优势？",
          content:
            "<p style='font-weight:bold;'>1、超高性价比</p>想住卡售价866元，全年民宿免费住。将覆盖全国超60个目的地，超过上千家高端民宿，高端民宿均价超600元。全年不限次入住，1次预订即可回本，多住多赚。<br/><br/><p style='font-weight:bold;'>2、更加人性化的退订政策</p>为了平衡用户的预订体验和库存的关系，想住卡提出了更加友好的退订政策。若您因个人原因无法入住已预订民宿,请务必提前48小时申请取消订单；如您未能提前48小时申请取消订单，平台将扣除15%的保证金作为退订费；如您未申请取消订单且未实际入住,平台将扣除30%保证金。<br/><br/><p style='font-weight:bold;'>3、更多权益支持，兑换权益，无忧购卡</p>想住卡到期若未使用，卡片权益不立即报废。用户可以兑换双宿等价的相关物联网家居产品，所有产品都是能有效提高生活质量的物联网单品。另外，用户可以直接兑换为双宿预订平台的民宿积分，在线支持预订等价民宿。<br/><br/><p style='font-weight:bold;'>14、赏金模式开启，不购想住卡，也可以分享赚收益</p>注册想住卡小程序用户，无需购卡也能通过分享邀请码，邀请朋友购卡，即可分得10%的一级好友返佣。好友再分享，还可获得5%的二级好友返佣。民宿畅快住，分享收益多。<br/><br/>"
        },
        {
          title: "二、会员权限及购卡须知",
          content:
            "1、购买 / 激活并完善个人信息成为「想住」会员后，即可在一年有效期内免费入住平台所有合作民宿，不限房型，不限次数。<br/><br/>2、一经购买，会员资格即生效；会员资格一经生效，概不退换。<br/><br/>3、会员权益仅限本人使用，在房型可住人数限制内（可住人数以各个房型的相关规定为准），您可与亲友共同入住。<br/><br/>4、使用免费入住权益时，您每次预订仅可预订1个房间,最多连续2晚，在办理完退房手续后，方可预订下次行程。<br/><br/>5、提交订单时需预付相应的入住保证金，金额按该房间市场价格(标价)计算。在成功办理退房手续后，保证金将在一个工作日内按原路返回。<br/><br/>6、若您因个人原因无法入住已预订民宿，请务必提前48小时内申请取消订单；如您未能提前48小时内申请取消订单，平台将扣除15%的保证金作为退订费；如您未申请取消订单且未实际入住，平台将扣除30%保证金。<br/><br/>"
        },
        {
          title: "三、相关订房问题？",
          content:
            "1、能保证房源的充足吗？<br/>「想住」平台会不定时上新，以保证房源供应。当然，周末与节假日为订房高峰期，可能会出现部分房源紧俏的情况，请合理安排出行时间。<br/><br/>2、会员卡可否转让给亲人/朋友使用？<br/>· 「想住」会员卡相关权益仅限本人使用，不可转让给他人使用。<br/><br/>· 在您本人入住的前提下，您可携带家人朋友入住已预订房间。房间可入住人数以各个房型的相关规定为准。<br/><br/>3、订房后/入住期间可否预订其他行程？<br/>不可以。为保证更多的会员用户享受会员免费入住权益，每张会员卡每次仅能预订1个房间，最多2晚，在成功办理退房手续后，方可预订下次行程。<br/><br/>"
        }
      ],
      discount: "-"
    };
  },
  watch: {},
  computed: {
    ableToBuy: function() {
      return this.$store.getters["user/canBuyMoreVip"];
    }
  },
  methods: {
    fetchVipPrice: function() {
      axios.get(this.API.GET_XZ_VIP_PRICE + "?loading=true").then(res => {
        this.discount = res.data.discount * 10;
      });
    },
    isNode() {
      if (this.$store.state.user.userInfo.agent_level) {
        this.pageJump("xzMyGroup");
      } else {
        this.pageJump("xzInviteList");
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
      document.title = "想住";
      alphaHub.$emit("fetch_userinfo");
      this.fetchVipPrice();
    });
  },
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.page {
  background: #fff;
  height: auto;
}
.order_btn {
  position: absolute;
  right: 0;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  background: #ffb82a;
  font-size: 28px;
  color: #333333;
  padding: 7px 18px;
  top: 45px;
}
.buy_btn {
  margin-top: 50px;
  height: 80px;
  width: 647px;
  background: #fff5f7;
  border-radius: 100px;
  font-size: 32px;
  color: #ffffff;
  padding: 18px 0;
}

.btns {
  margin-top: 50px;
  height: 80px;
  width: 647px;
  background: #fff5f7;
  border-radius: 100px;
  font-size: 32px;
  color: #ffffff;
  padding: 18px 15px;
}
.v_line {
  height: 66px;
  width: 2px;
  background: #febabc;
  opacity: 0.3;
}

.able {
  background: #fff5f7;
}
.disable {
  background: #d8d8d8;
}
.ml30 {
  margin-left: 30px;
}
.lucy_logo {
  height: 60px;
  width: 60px;
  background: transparent;
  border-radius: 100%;
  margin-right: 10px;
}
.arrow_right {
  opacity: 1;
  width: 10px;
  height: 10px;
  transform: rotate(135deg);
  border-top: 2px solid #333;
  border-left: 2px solid #333;
}
.arrow_right.red {
  border-top: 2px solid #fc565a;
  border-left: 2px solid #fc565a;
}
.arrow_right_op5 {
  opacity: 0.5;
}
.arrow_right_op2 {
  opacity: 0.2;
}
.long_bg {
  min-height: 504px;
  width: 100%;
  background-image: url("/game/static/images/xiangzhu/card_bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .mt112 {
    margin-top: 112px;
  }
  .vip_card {
    background-image: url("/game/static/images/xiangzhu/xzcard.png");
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 16px;
    width: 489px;
    height: 302px;
    margin-top: 50px;
  }
  .content {
    padding-bottom: 180px;
  }
}
.tab_bar {
  position: fixed;
  z-index: 2;
  background: #fff;
  bottom: 0;
  width: 100%;
  height: 140px;
  border-top: 1px solid lightgray;
  div:first-child {
    border-right: 1px solid #d8d8d8;
  }
  .icon {
    width: 40px;
    height: 40px;
    background-image: url("/game/static/images/wallet/cross.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 6px;
  }
  .icon_order {
    background-image: url("/game/static/images/xiangzhu/orders.svg");
  }
  .icon_service {
    background-image: url("/game/static/images/xiangzhu/service.svg");
  }
  .btn {
    height: 100%;
    border-radius: 0;
  }
}
.rights_area {
  width: 100%;
  .right_item {
    margin-bottom: 76px;
    width: calc(50% - 60px);
    padding: 0 30px;
    .des {
      width: calc(100% - 84px);
    }
    .title {
      font-size: 28px;
      color: #333333;
    }
    .sub_title {
      font-size: 24px;
      transform-origin: left center;
      transform: scale(0.92);
      color: #999999;
    }
    .icon {
      width: 70px;
      height: 70px;
      margin-right: 14px;
      background-size: 100%;
      background-repeat: no-repeat;
    }
    .right_1 {
      background-image: url("/game/static/images/xiangzhu/right_1.svg");
    }
    .right_2 {
      background-image: url("/game/static/images/xiangzhu/right_2.svg");
    }
    .right_3 {
      background-image: url("/game/static/images/xiangzhu/right_3.svg");
    }
    .right_4 {
      background-image: url("/game/static/images/xiangzhu/right_4.svg");
    }
    .right_5 {
      background-image: url("/game/static/images/xiangzhu/right_5.svg");
    }
    .right_6 {
      background-image: url("/game/static/images/xiangzhu/right_6.svg");
    }
    p {
      width: 100%;
      white-space: nowrap;
    }
  }
}
.collapse_area {
  background: white;
  height: auto;
  padding: 0 30px;
}
</style>